<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>意见管理</el-breadcrumb-item>
      <el-breadcrumb-item>回复意见</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="margintop20" v-if="advise">
      <el-col :span="12">
        <h6>意见详情</h6>
        <h4>标题--- {{advise.title}}</h4>
        <p>意见人: {{advise.username}} 时间: {{advise.time | timeFormat}}</p>
        <p>内容:</p>
        <el-card shadow="always" class="adcontent">
          <div v-html="advise.content"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <h5>回复列表</h5>
        <div v-for="(item,i) in advise.reply" :key="i">
          <p>
            {{item.author}} / {{item.time | timeFormat}}
            <el-tag effect="plain" :type="item.roleid | colortype">{{item.roleid | rolename}}</el-tag>
          </p>
          <p></p>
          <p>{{item.tips}}</p>
          <p>--------------------------------------</p>
        </div>

        <el-form
          :model="form"
          :rules="rules"
          ref="myform"
          style="width:80%"
          label-position="top"
          class="myform"
        >
          <el-form-item label="意见回复" prop="tips">
            <el-input v-model="form.tips"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="addReply">点击回复</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { getadvisebyid, addreply } from "@/api";
export default {
  data() {
    return {
      form: {},
      rules: {
        tips: [{ required: true, message: "请输入回复消息", trigger: "blur" }],
      },
      advise: [],
    };
  },
  methods: {
    addReply() {
      this.$refs.myform.validate((valid) => {
        if (valid) {
          addreply({
            username: sessionStorage.getItem("username"),
            _id: this.$route.params.id,
            tips: this.form.tips,
          }).then((res) => {
            if (res.type) {
              getadvisebyid({
                _id: this.$route.params.id,
              }).then((res) => {
                if (res.type) {
                  this.advise = res.result;
                  this.form = {};
                }
              });
            }
          });
        } else {
          this.$message.error("请填写回复信息...");
          return false;
        }
      });
    },
  },
  mounted() {
    getadvisebyid({
      _id: this.$route.params.id,
    }).then((res) => {
      if (res.type) {
        this.advise = res.result;
        console.log(res.result);
      }
    });
  },
};
</script>


<style lang="scss" scoped>
.adcontent {
  width: 80%;
  height: 260px;
  border: 1px solid darkkhaki;
  border-radius: 10px;
}
</style>